<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="云狐AI">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="theme-color" content="#3A3052">
  
  <title>云狐AI - 智能AI助手</title>
  
  <!-- 预加载关键资源 -->
  <link rel="preload" href="/static/icons/robot-avatar.png" as="image">
  
  <!-- 应用图标 -->
  <link rel="icon" href="/static/icons/favicon.ico" type="image/x-icon">
  <link rel="apple-touch-icon" href="/static/icons/apple-touch-icon.png">
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  
  <!-- 样式重置 -->
  <style>
    /* 重置默认样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html, body {
      height: 100%;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      background-color: #3A3052;
    }
    
    /* 加载动画 */
    .loading-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #3A3052 0%, #4A4062 100%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }
    
    .loading-logo {
      font-size: 50px;
      font-weight: bold;
      color: #F0D9B5;
      margin-bottom: 24px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .loading-subtitle {
      color: #8F82A8;
      font-size: 20px;
      margin-bottom: 40px;
    }
    
    .loading-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(240, 217, 181, 0.3);
      border-top: 3px solid #F0D9B5;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .loading-text {
      color: #8F82A8;
      font-size: 16px;
      margin-top: 20px;
    }
    
    /* 隐藏加载界面 */
    .loading-container.hidden {
      opacity: 0;
      visibility: hidden;
      transition: all 0.5s ease;
    }
  </style>
</head>
<body>
  <!-- 加载界面 -->
  <div id="loading" class="loading-container">
    <div class="loading-logo">云狐AI</div>
    <div class="loading-subtitle">智能AI助手</div>
    <div class="loading-spinner"></div>
    <div class="loading-text">正在加载...</div>
  </div>
  
  <!-- 应用容器 -->
  <div id="app"></div>
  <!-- 应用脚本 -->
  <script>
    // 页面加载完成后隐藏加载界面
    window.addEventListener('load', function() {
      setTimeout(function() {
        const loading = document.getElementById('loading');
        if (loading) {
          loading.classList.add('hidden');
          setTimeout(function() {
            loading.style.display = 'none';
          }, 500);
        }
      }, 1000);
    });
    
    // 错误处理
    window.addEventListener('error', function(e) {
      console.error('页面错误:', e.error);
    });
    
    // 未处理的Promise拒绝
    window.addEventListener('unhandledrejection', function(e) {
      console.error('未处理的Promise拒绝:', e.reason);
    });
  </script>
   <script type="module" src="/main.js"></script>
</body>
</html>
